<template>
	<el-container>
        <el-main>
            <mapbox_map v-bind:menuSelectNum="this.menuSelect"></mapbox_map>
            <el-menu style="position:absolute;height: 30px; width: 30px;top: 170px;left: 10px;" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                <el-submenu  index="1" style="height: 30px;width: 30px;" >
                    <template slot="title" style="padding-left: 10px;width: 30px;height: 30px;">
                        <i class="el-icon-menu" style="margin-left: -17px;margin-top: -27px"></i>
                        <span slot="title">图表</span>
                    </template>
                    <el-menu-item-group >
                        <span slot="title">耕地专题</span>
                        <el-menu-item v-on:click="menuSelectChange(11)" index="1-1">专题分析一</el-menu-item>
                        <el-menu-item v-on:click="menuSelectChange(12)" index="1-2">专题分析二</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group >
                        <span slot="title">生态专题</span>
                        <el-menu-item v-on:click="menuSelectChange(21)" index="2-1">专题分析一</el-menu-item>
                        <el-menu-item v-on:click="menuSelectChange(22)" index="2-2">专题分析二</el-menu-item>
                    </el-menu-item-group >
                    <el-menu-item-group >
                        <span slot="title">城市建设用地专题</span>
                        <el-menu-item v-on:click="menuSelectChange(31)" index="3-1">专题分析一</el-menu-item>
                        <el-menu-item v-on:click="menuSelectChange(32)" index="3-2">专题分析二</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group >
                        <span slot="title">农用地结构专题</span>
                        <el-menu-item v-on:click="menuSelectChange(41)" index="4-1">专题分析一</el-menu-item>
                        <el-menu-item v-on:click="menuSelectChange(42)" index="4-2">专题分析二</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>

            <el-button v-on:click="tableClick" type="primary" icon="el-icon-s-order" style="position:absolute;height: 30px; width: 30px;top: 210px;left: 10px;border-color: white;"></el-button>

            <el-button v-on:click="chartClick" type="primary" icon="el-icon-s-marketing" style="position:absolute;height: 30px; width: 30px;top: 250px;left: 10px;border-color: white;margin-left: 0px; "></el-button>


            <chart v-show="chartShow" v-bind:menuSelectNum="this.menuSelect"></chart>
<!--            <char-tabs v-bind:menuSelectNum="this.menuSelect"></char-tabs>-->
            <myTable v-show="ifTableShow"></myTable>

            <styleLegend style="position: absolute;left: 10px;bottom: 100px;background-color: #fff;border-radius: 5px;">
            </styleLegend>
        </el-main>
	</el-container>
</template>

<script>
	import mapbox_map from "./project/mapbox.vue"
    import Chart from "./charts/chart";
	import myTable from "./charts/myTable";
	import charTabs from "./charts/chartTabs";
    import styleLegend from "./project/legend.vue"

	export default {
		components: {
			Chart,
			mapbox_map,
            myTable,
            charTabs,
            styleLegend
		},
		data() {
			return {
				isCollapse: true,
                chartShow: false,
                ifTableShow:false,
                activeNames: ['1'],
                menuSelect:0
			}
		},
        created() {
            this.chartShow = false  //初始化时候的赋值
        },
		methods: {
			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			chartClick(){
				if(this.chartShow){
					this.chartShow=false
				}
				else {
					this.chartShow=true;
				}
            },
            tableClick(){
                if(this.ifTableShow){
                    this.ifTableShow=false
                }
                else {
                    this.ifTableShow=true;
                }
            },
            menuSelectChange(index){
			    this.menuSelect=index;
            }

		}
	}


</script>

<style>
	.el-submenu [class^=el-icon-] :hover{

	}
	.el-submenu__title {
		height: 30px;
		line-height: 56px;
		position: relative;
		-webkit-box-sizing: border-box;
		white-space: nowrap;
		list-style: none;
	}
    .el-submenu__title {
        font-size: 14px;
        color: #303133;
        /* padding: 0 20px; */
        cursor: pointer;
        -webkit-transition: border-color .3s,background-color .3s,color .3s;
        transition: border-color .3s,background-color .3s,color .3s;
        box-sizing: border-box;
    }
    .el-button--primary {
        color: #909399;
    }
    .el-button {
        display: inline-block;
        line-height: 1;
        white-space: nowrap;
        cursor: pointer;
        background: #FFF;
        border: 1px solid #DCDFE6;
        color: #606266;
        -webkit-appearance: none;
        text-align: center;
        box-sizing: border-box;
        outline: 0;
        margin: 0;
        -webkit-transition: .1s;
        transition: .1s;
        font-weight: 500;
        padding: 0px 00px;
        font-size: 14px;
        border-radius: 4px;
    }
	template {
		padding-left: 10px;
	}
</style>